window.addEventListener('load', function () {
    var songCommend = document.querySelector('.song-commend');
    var innerBottomL = songCommend.querySelector('.inner-bottom .left');
    var innerBottomR = songCommend.querySelector('.inner-bottom .right');

    //左右按钮的出现
    songCommend.addEventListener('mouseover', function () {
        innerBottomL.style.display = 'block';
        innerBottomR.style.display = 'block';
    })

    //左右按钮的消失
    songCommend.addEventListener('mouseout', function () {
        innerBottomL.style.display = 'none';
        innerBottomR.style.display = 'none';

    })

    // 返回顶部的实现
    // 返回顶部动画函数过渡
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            window.scroll(0, window.pageYOffset + step);
        }, 6);
    }
    var main = document.querySelector('.main');
    var topBack = document.querySelector('.topback');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset >= main.offsetTop) {
            topBack.style.display = 'block';
        } else {
            topBack.style.display = 'none';
        }

    })
    topBack.addEventListener('click', function () {
        animate(window, 0);
    })
    var play = document.querySelector('.play');
    var code = document.querySelector('.code');
    play.addEventListener('mouseover', function () {
        code.style.visibility = 'visible';
    })
    play.addEventListener('mouseout', function () {
        code.style.visibility = 'hidden';
    })
    // 播放条里面的开始暂停设置
    var y = 0;
    var start = document.querySelector('.player-btns .start');
    start.addEventListener('click', function () {
        if (y % 2 == 0 || y == 0) {
            start.setAttribute('style', 'background-position:-40px -165px');
        } else {
            start.setAttribute('style', 'background-position:-40px -204px');
        }
        y++
    })

    // 播放条里面的锁
    var x = 0;
    var open = false;
    var key = document.querySelector('.icon-key');
    key.addEventListener('click', function () {
        if (x % 2 == 0 || x == 0) {
            key.setAttribute('style', 'background-position:-80px -400px');
            open = true;
        } else {
            key.setAttribute('style', 'background-position:-100px -380px');
            open = false;
        }
        x++
    })

    var hand = document.querySelector('.hand');
    var player = document.querySelector('.m-player');
    hand.addEventListener('mouseout', function () {
        if (open == true) {
            player.setAttribute('style', 'top:-7px');
        }


    })
    var totalkey = document.querySelector('.key');
    totalkey.addEventListener('mouseout', function () {
        console.log(555);
        console.log(open);
        if (open == true) {
            player.setAttribute('style', 'top:-7px');
            console.log(222);
        }


    })
    player.addEventListener('mouseover', function () {
        if (open == true) {
            player.setAttribute('style', 'top:-53px');
        }


    })
    // 播放条的设置
    var isDown = false;
    var beforeW = 0;
    var nowleftx = 0;

    function fn(event) {
        nowleftx = event.clientX - beforex + beforeW;
        console.log(nowleftx);
        if (nowleftx >= 460) {
            isDown = false;
        }
        if (isDown == true) {

            btnBox.style.width = nowleftx + 'px';
        }
    }
    var beforex = 0;
    var btnBox = document.querySelector('.btn-box');
    var btn = btnBox.querySelector('.btn');
    btn.addEventListener('mousedown', function (event) {
        beforex = event.clientX;
        beforeW = btn.offsetLeft + 9;
        // isDown = true;

        isDown = true;

        btn.addEventListener('mousemove', fn)
    })
    btn.addEventListener('mouseup', function () {
        isDown = false;
    })

})